<template>
	<view class="item" @click="jumpDetails">
		<!-- {{item}} -->
		<view class="top">
			<view class="number" @click.native.stop="copy(item.order_no)">订单号：{{ item.order_no }}</view>
			<view class="status" v-if="item.pay_state == 0">待付款</view>
			<view class="status" v-if="item.pay_state == 1 && item.order_state == 2">生效中</view>
			<view class="status" v-if="item.order_state == 4">已取消</view>
		</view>
		<u-divider lineColor="#F8F9FA"></u-divider>
		<view class="middle">
			<view class="title">竣工保修</view>
			<view class="content">
				<view class="left">
					<view class="images">
						<image style="width: 100rpx; height: auto" mode="widthFix" src="/static/house.jpg" @error="imageError"></image>
						<!-- <u--image src="/static/house.jpg" width="100rpx" height="100rpx"  mode="widthFix"></u--image> -->
					</view>
					<view class="desc">	保修时间：{{ item.service_time }}个月</view>
				</view>
				<view class="right">
					<view class="text">{{ item.service_lv }}</view>
					<!--  :class="{'active':item.last_pay_state==1}" -->
					<view class="text">
						<!--  -->
						<span class="status" >支付金额：</span>
						<span class="price">￥{{ item.total_fee }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="date">{{ item.create_time }}</view>
			<view class="btn">
				<!-- v-if="item.pay_state + '' === 0 + '' && item.last_pay_state + '' === 0 + ''" -->
				<u-button shape="circle" @click.native.stop="cancelOrder(item)" text="取消订单" size="mini" v-if="item.pay_state == 0"></u-button>
				<!-- v-if="item.pay_state + '' === 0 + '' && item.last_pay_state + '' === 0 + ''" -->
				<u-button type="primary" @click.native.stop="payOrder(item)" shape="circle" text="去支付" color="#21B579" size="mini" v-if="item.pay_state == 0"></u-button>
				<u-button shape="circle" @click.native.stop="applyService" text="申请保修" size="mini"  v-if="item.pay_state == 1 && item.order_state == 2"></u-button>
				<u-button shape="circle" color="#ccc"  text="申请保修" size="mini" ></u-button>
				<!-- <u-button shape="circle" @click.native.stop="jumpLog" text="装修日志" size="mini" ></u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
import {wxPay} from '../../../utils/public'
export default {
	props: {
		item: {
			type: Object,
			default: {}
		},
		userId:{
			type:Number,
			
		}
	},
	data() {
		return {
			// userInfo: {}
			// disabled: true,
			// customStyle: {
			// 	marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
			// 	color: 'red',
			// }
		};
	},
	
	methods: {
		// 取消订单
		
		cancelOrder(item){
			
			let that = this
			console.log(that.userId)
			uni.showModal({
				title: '提示',
				content: '你确定取消这个订单吗？',
				success: function (res) {
					if (res.confirm) {
						
						that.$api.post('/fit/cancelOrder',{outTradeNo:item.order_no,userId:that.userId}).then(res=>{
							
						})
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		applyService(){
				uni.showToast({
					title:'线上申请',
					icon:'none'
				})
		},
		// 支付订单
		payOrder(obj){
			console.log(obj)
			let that = this
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userInfo = res.data;
					let data = {
						openid: res.data.openid,
						// ownership: 'last',
						source: 'service_order',
						userId: res.data.id,
						outTradeNo: obj.order_no
					};
					that.$api.post('/fit/payment', data).then((response) => {
						console.log(response, 'response');
						
						wxPay(response.data, { outTradeNo: obj.order_no, serviceTime:obj.service_time,  price: obj.totalFee })
					});
					console.log(data)
				}
			});
			
			
		},
		jumpDetails() {
			// uni.navigateTo({
			// 	url: `/pages/orderDetails/orderDetails?id=${this.item.order_no}`
			// });
		},
		jumpLog(){
			uni.navigateTo({
				url: `/pages/serviceDiary/serviceDiary?id=${this.item.order_no}`
			});
		},
		copy(){
			// uni.getClipboardData({
				
			// })
		},
		copy(order_no) {
			uni.setClipboardData({
				data: order_no,
				success: function () {
					console.log('success');
					uni.showToast({
						icon: 'none',
						title: `复制成功`
					});
				}
			});
		}
		// 获取用户信息数据
		// getUserInfo() {
		// 	let that = this;
		// 	uni.getStorage({
		// 		key: 'userInfo',
		// 		success(res) {
		// 			that.userInfo = res.data;
		// 		}
		// 	});
		// }
		
	}
};
</script>

<style scoped lang="scss">
@import './item.scss';
</style>
